<template>
  <div>
    <navs :isDark="true"></navs>
    <div class="cont">
      <div class="flex-ct hcbox">
        <div class="hc">{{ $t("Exchange.Exchange2") }}</div>
        <div class="flex-en">
          <div>{{ $t("home.accountBalance") }}</div>
          <img src="../assets/image/other/svg.png" class="svg" alt="" />
          <div>{{ aimeBalance }} AIME</div>
        </div>
      </div>
      <div class="Balance">
        <div class="flex-st inputbox">
          <div>AIME</div>
          <input type="number" v-model="numbers1" class="input" min="1" />
        </div>
        <div class="flex-st inputbox">
          <div>USDT</div>
          <input
            type="number"
            disabled
            :value="numbers2"
            class="input"
            min="1"
          />
        </div>
        <div class="sxf">{{ $t("Exchange.Exchange3") }} : {{ swapFees }} %</div>
        <button class="hcbtn" @click="mergeNFT" :disabled="isMerging">
          {{ isMerging ? $t("Exchange.Exchange5") : $t("Exchange.Exchange1") }}
        </button>
      </div>
      <foot></foot>
    </div>
  </div>
</template>
<script>
import navs from "../components/nav.vue";
import foot from "./components/foot.vue";
import { web3, AIMESwapContract, AIMEContract } from "@/assets/js/web3.js";
import { Toast } from "vant";

export default {
  components: { navs, foot },
  data() {
    return {
      numbers1: "",
      aimeBalance: 0,
      swapFees: 0,
      aimePrices: 0,

      tokenType: 2, // 2: RIS, 1: AIME
      showTokenPicker: false,

      risBalance: 0,
      nftBalance: 0,
      needRis: 0,
      needAime: 0,
      risPrice: 0.25,
      nft1Reward: 0,
      isMerging: false,
      currentAccount: "",
      RiseBalance: 0,
      leaderAddress: "",
      SGDHBalance: 0,
    };
  },
  computed: {
    numbers2() {
      return this.numbers1 && this.aimePrices
        ? (this.numbers1 * this.aimePrices).toFixed(2)
        : "";
    },
  },

  mounted() {
    this.currentAccount = sessionStorage.getItem("account") || "";
    this.getAccountData();
  },
  methods: {
    async getAccountData() {
      if (!this.currentAccount) return;
      try {
        console.log(this.currentAccount);
        const res = await AIMESwapContract.methods
          .getAimeSwapData(this.currentAccount)
          .call();
        console.log(res);
        this.aimeBalance = Number(
          web3.utils.fromWei(res.aimeBalance, "ether")
        ).toFixed(2);
        this.swapFees = res.swapFees / 10;

        this.aimePrices = Number(web3.utils.fromWei(res.aimePrices, "ether"));
      } catch (e) {
        console.error("合约调用失败", e);
      }
    },
    async checkAllowance() {
      const amountWei = web3.utils.toWei(this.numbers1.toString(), "ether");
      const allowance = await AIMEContract.methods
        .allowance(this.currentAccount, AIMESwapContract.options.address)
        .call();
      return web3.utils.toBN(allowance).gte(web3.utils.toBN(amountWei));
    },

    async mergeNFT() {
      if (!this.numbers1) {
        return Toast(this.$t("Exchange.Exchange8"));
      }
      if (!this.currentAccount)
        return Toast(this.$t("home.pleaseConnectWallet"));

      try {
        // 检查授权
        const isApproved = await this.checkAllowance();
        if (!isApproved) {
          // 授权AIME给交换合约
          const MAX_APPROVE_AMOUNT = web3.utils.toWei("1000000", "ether");
          await AIMEContract.methods
            .approve(AIMESwapContract.options.address, MAX_APPROVE_AMOUNT)
            .send({ from: this.currentAccount });
        }

        console.log(web3.utils.toWei(this.numbers1.toString(), "ether"));
        this.isMerging = true;
        await AIMESwapContract.methods
          .AIMESwapUsdt(web3.utils.toWei(this.numbers1.toString(), "ether"))
          .send({ from: this.currentAccount });
        this.loadData();
        Toast(this.$t("Exchange.Exchange6"));
      } catch (e) {
        Toast(this.$t("Exchange.Exchange7"));
      } finally {
        this.isMerging = false;
      }
    },
    async loadData() {
      await this.getAccountData();
      this.numbers1 = "";
    },
  },
};
</script>

<style lang="less" scoped>
.cont {
  min-height: 100vh;
  padding: 100px 36px;
  background: #121212;
  font-weight: 400;
  font-size: 32px;
  color: #a1a1a1;
  .home2 {
    width: 100%;
    margin: 128px 0;
  }
  .hcbox {
    flex-wrap: wrap;
    margin-bottom: 60px;

    .hc {
      font-size: 48px;
      color: #ededed;
    }
    .flex-en {
      font-size: 28px;
    }
    .svg {
      width: 40px;
      height: 40px;
      margin-left: 24px;
      margin-right: 16px;
    }
  }
  .Balance {
    border-radius: 16px 16px 16px 16px;
    border: 2px solid #212121;
    padding: 50px;
    font-size: 32px;
    // margin: 64px 0;
    .MAX {
      font-weight: 300;
      font-size: 28px;
      color: #bdee63;
    }
    .tokenTypebox {
      margin: 20px 0;
      .selected-text {
        margin-right: 10px;
      }
    }
    .inputbox {
      color: #fff;
    }
    .input {
      width: 100%;
      border: none;
      //   font-size: 38px;
      color: #ededed;
      margin: 32px 0;
      background: #1a181b;
      border-radius: 50px;
      padding: 30px;
      margin-left: 20px;
    }
    .RISbox {
      font-size: 28px;
      background: #1a181b;
      border-radius: 19998px;
      padding: 26px;
      margin-bottom: 16px;
      color: #ededed;
      .svg2 {
        width: 28px;
        height: 32px;
        margin-right: 2px;
      }
    }
    .sxf {
      text-align: center;
    }
    .hcbtn {
      background: #bdee63;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      font-weight: 500;
      font-size: 32px;
      color: #121113;
      padding: 14px;
      text-align: center;
      margin-top: 34px;
      border: none;
      width: 100%;
    }
  }
}
/deep/ .van-picker {
  padding: 20px;
}
/deep/ .van-picker__toolbar button {
  font-size: 30px !important;
}
</style>
